<template>
  <Mapbox :mapOnLoadCB="mapOnLoadCB"></Mapbox>
</template>

<script>
import {ref} from "vue"
import Mapbox from "@/components/common/Mapbox.component.vue"

export default {
  name: "MapRevolve.component",
  components: {Mapbox},
  setup() {

    const rotateCamera = (timestamp) => {
      // clamp the rotation between 0 -360 degrees
      // Divide timestamp by 100 to slow rotation to ~10 degrees / sec
      mapStore.value.rotateTo((timestamp / 100) % 360, {duration: 0});
      // Request the next frame of the animation.
      requestAnimationFrame(rotateCamera);
    }

    let mapStore = ref({});
    let mapOnLoadCB = (map) => {
      mapStore.value = map;

      // Start the animation.
      rotateCamera(0);

      // Add 3d buildings and remove label layers to enhance the map
      let layers = map.getStyle().layers;
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].type === 'symbol' && layers[i].layout['text-field']) {
          // remove text labels
          map.removeLayer(layers[i].id);
        }
      }

      map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
          'fill-extrusion-color': '#aaa',

          // use an 'interpolate' expression to add a smooth transition effect to the
          // buildings as the user zooms in
          'fill-extrusion-height': [
            "interpolate", ["linear"], ["zoom"],
            15, 0,
            15.05, ["get", "height"]
          ],
          'fill-extrusion-base': [
            "interpolate", ["linear"], ["zoom"],
            15, 0,
            15.05, ["get", "min_height"]
          ],
          'fill-extrusion-opacity': .6
        }
      });
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style scoped>

</style>